<template>
  <div class="container">
    <form @submit.prevent="addRecord" class="form">
      <el-button type="text" @click="handleLogout" class="logout-button">退出</el-button>
      
      <fieldset class="fieldset">
        <legend>入库操作</legend>
        <div class="input-group">
          <div class="input-item">
            <label for="entry_date">入库日期:</label>
            <input type="date" id="entry_date" v-model="newRecord.entry_date" required>
          </div>
          <div class="input-item">
            <label for="plate_number">车牌号:</label>
            <input type="text" id="plate_number" v-model="newRecord.plate_number" required>
          </div>
          <div class="input-item">
            <label for="entry_bags">入库件数:</label>
            <input type="number" id="entry_bags" v-model="newRecord.entry_bags" required>
          </div>
        </div>
      </fieldset>

      <fieldset class="fieldset">
        <legend>出库操作</legend>
        <div class="input-group">
          <div class="input-item">
            <label for="departure_date">开船日:</label>
            <input type="date" id="departure_date" v-model="newRecord.departure_date" required>
          </div>
          
          <div class="input-item">
            <label for="order_number">订单号:</label>
            <input type="text" id="order_number" v-model="newRecord.order_number" required>
          </div>
          <div class="input-item">
            <label for="departure_bags">出库件数:</label>
            <input type="number" id="departure_bags" v-model="newRecord.departure_bags" required>
          </div>
        </div>
      </fieldset>

      <button type="submit" class="submit-button">添加记录</button>
    </form>

    <table class="record-table">
      <thead>
        <tr>
          <th>ID</th>
          <th>入库日期</th>
          <th>车牌号</th>
          <th>入库件数</th>
          <th>入库吨数</th>
          <th>开船日</th>
          <th>订单号</th>
          <th>出库件数</th>
          <th>出库吨量</th>
          <th>提单号</th>
          <th>业务号</th>
          <th>剩余吨量</th>
          <th>仓储费</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="record in records" :key="record.id">
          <td>{{ record.id }}</td>
          <td>{{ record.entry_date }}</td>
          <td>{{ record.plate_number }}</td>
          <td>{{ record.entry_bags }}</td>
          <td>{{ record.entry_tons }}</td>
          <td>{{ record.departure_date }}</td>
          <td>{{ record.order_number }}</td>
          <td>{{ record.departure_bags }}</td>
          <td>{{ record.departure_tons }}</td>
          <td>{{ record.bill_number }}</td>
          <td>{{ record.business_number }}</td>
          <td>{{ record.remaining_tons }}</td>
          <td>{{ record.storage_fee }}</td>
          <td>
            <button @click="deleteRecord(record.id)" class="delete-button">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
export default {
  name: 'WarehouseManagement',

methods: {
    handleLogout() {
      this.$router.push('/');
    }
  }
};
</script>
<script setup>
  import { ref, onMounted } from 'vue';

  const records = ref([]);
  const newRecord = ref({
    entry_date: '',
    plate_number: '',
    entry_bags: 0
  });
  const loading = ref(false);
  const error = ref(null);
  
  const fetchRecords = async () => {
  loading.value = true;
  error.value = null;
  try {
    const response = await fetch('http://localhost:3000/api/warehouse_records');
    if (!response.ok) throw new Error('Failed to fetch records');
    records.value = await response.json();
  } catch (err) {
    error.value = err.message;
  } finally {
    loading.value = false;
  }
};
  
const addRecord = async () => {
  error.value = null;
  try {
    const  businessNumber = generateBusinessNumber();
    newRecord.value.business_number = businessNumber;

    const response = await fetch('http://localhost:3000/api/warehouse_records', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(newRecord.value)
    });
    if (!response.ok) throw new Error('Failed to add record');
    fetchRecords();
    newRecord.value = { entry_date: '', 
                        plate_number: '', 
                        entry_bags: 0 ,
                        business_number: ''
                       }; // Reset the form
  } catch (err) {
    error.value = err.message;
  }
};
const generateBusinessNumber = () => {
  const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
  let businessNumber = '';
  for (let i = 0; i < 12; i++) {
    businessNumber += characters.charAt(Math.floor(Math.random() * characters.length));
  }
  return businessNumber;
};
  
const deleteRecord = async (id) => {
  error.value = null;
  try {
    const response = await fetch(`http://localhost:3000/api/warehouse_records/${id}`, { method: 'DELETE' });
    if (!response.ok) throw new Error('Failed to delete record');
    fetchRecords();
  } catch (err) {
    error.value = err.message;
  }
};
  onMounted(fetchRecords);
  </script>
  
  <style scoped>
  .container {
    padding: 20px;
    background-color: #f0f2f5;
  }
  
  .form {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
  }
  
  .logout-button {
    display: block;
    margin-bottom: 20px;
    color: #ff4d4f;
    text-align: right;
  }
  
  .fieldset {
    margin-bottom: 20px;
    border: 1px solid #ddd;
    padding: 20px;
    border-radius: 8px;
  }
  
  legend {
    font-weight: bold;
  }
  
  .input-group {
    display: flex;
    justify-content: space-between;
  }
  
  .input-item {
    flex: 1;
    margin-right: 10px;
  }
  
  label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
  }
  
  input[type="text"],
  input[type="date"],
  input[type="number"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #ddd;
    border-radius: 4px;
  }
  
  .submit-button {
    background-color: #409eff;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }
  
  .submit-button:hover {
    background-color: #66b1ff;
  }
  
  .record-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  }
  
  .record-table th, .record-table td {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: left;
  }
  
  .record-table th {
    background-color: #f7f7f7;
    font-weight: bold;
  }
  
  .delete-button {
    background-color: #ff4d4f;
    color: #fff;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }
  
  .delete-button:hover {
    background-color: #ff7875;
  }
  </style>